import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { HotRecommendWrapper } from './style'
import AreaHeaderV1 from '@/components/area-header-v1'
import { useAppSelector } from '@/store'
import SongsMenuItem from '@/components/songs-menu-item'

interface IProps {
  children?: ReactNode
}

const HotRecommend: React.FC<IProps> = (props) => {
  // 从store中获取热门推荐数据
  const { hotRecommends = [] } = useAppSelector((state) => ({
    hotRecommends: state.recommend.hotRecommends
  }))

  return (
    <HotRecommendWrapper>
      {/* 标题区 */}
      <AreaHeaderV1
        title="热门推荐"
        keyword={['华语', '流行', '摇滚', '民谣', '电子']}
        moreText="更多"
        moreLink="/discover/songs"
      />
      {/* 具体内容区 */}
      <div className="recommend-list">
        {hotRecommends.map((item) => {
          return (
            <SongsMenuItem key={item.id} itemData={item} />
            // <div className="item" key={item.id}>
            //   {item.name}
            // </div>
          )
        })}
      </div>
    </HotRecommendWrapper>
  )
}

export default memo(HotRecommend)
